<!-- 统一弹框样式 -->
<template>

  <el-dialog
      v-bind="$attrs"
      v-model="dialogVisible"
      ref="dialogRef"
  >
    <template #default>
      <div class="dialog-margin dialog-content">
        <slot></slot>
      </div>
    </template>
    <template #header>
      <slot name="header"></slot>
    </template>
    <template #footer>
      <div class="dialog-margin">
        <slot name="footer">
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="reset">取消</el-button>
        </slot>
      </div>
    </template>
    <!--  title已经被标记为deprecated  -->
    <!--    <template #title>-->
    <!--      <slot name="title"></slot>-->
    <!--    </template>-->
  </el-dialog>
</template>
<script setup>

import {computed, ref} from "vue";

const dialogRef = ref(null);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(["submit", "reset", "update:modelValue"])

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => {
    emits("update:modelValue", value)
  }
})

const submit = () => {
  emits("submit")
}
const reset = () => {
  dialogVisible.value = false;
  emits("reset")
}

</script>
<style scoped>
.dialog-content {
  margin: 20px 0;
}
</style>